<script setup lang="ts">
import {Ref,ref} from "vue";
import {useRoute,useRouter} from "vue-router"
const $router = useRouter();
import {Search} from "@element-plus/icons";

const searchInfo: Ref<String> = ref("");
function gotoLogin(){
    $router.push({
      name: 'otherLogin'
    })
}
function gotoRegister(){
  $router.push({
    name: 'register'
  })
}
function mobile() {
  $router.push({
    name: 'mobile'
  })
}
function index() {
  $router.push({
    name: 'index'
  })
}
function shopCar() {
  $router.push( {
    name: 'shopCar'
  })
}
</script>

<template>
    <el-row>
        <el-col :span="3">
          <span class="loginFont" @click="gotoLogin(0)">亲，请登录</span>
          <span class="regisFont" @click="gotoRegister(1)">免费注册</span>
        </el-col>
        <el-col :span="8" :offset="13" id="myHead">
          <span @click="mobile" class="cursor-pointer hover:text-myRed-one">手机端</span>
          <span @click="index" class="cursor-pointer hover:text-myRed-one">商城首页</span>
          <span class="cursor-pointer hover:text-myRed-one"><el-icon :size="19" class="middle"><Avatar /></el-icon>个人中心</span>
          <span class="cursor-pointer" @click="shopCar"><el-icon :size="19" class="middle"><ShoppingCart /></el-icon>购物车0</span>
        </el-col>
    </el-row>
  <el-row>
    <el-col :span="4">
      <img src="../assets/logobig.png" class="cursor-pointer" @click="index" style="float: right"/>
    </el-col>
    <el-col :span="7" :offset="12" class="middle1">
      <el-input v-model="searchInfo">
        <template #append>
          <el-button :icon="Search">
          </el-button>
        </template>
      </el-input>
    </el-col>
  </el-row>
</template>

<style scoped>
.loginFont {
  color: #f22e00;
  font-size: 15px;
  cursor: pointer;
  padding-right: 5px;
}
.regisFont {
  color: gray;
  font-size: 15px;
  cursor: pointer;
}
.regisFont:hover {
  color: #f22e00;
}
.middle1 {
  display: flex;
  align-items: center;
}
:deep(.el-input__inner):focus {
  border: solid 1px #f03726 !important;
}
#myHead>span {
  margin-left: 20px;
  font-size: 15px;
  cursor: pointer;
}
.middle {
  display: inline-block;
  vertical-align: top;
}
</style>
